<!DOCTYPE html>
<html lang="en">

<head>

  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <!--favicon -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
  <link rel="apple-touch-icon" sizes="180x180" href="../css/favicon/apple-touch-icon.png">
  <link rel="icon" type="image/png" sizes="32x32" href="../css/favicon/favicon-32x32.png">
  <link rel="icon" type="image/png" sizes="16x16" href="../css/favicon/favicon-16x16.png">
  <link rel="manifest" href="../css/favicon/site.webmanifest">
  <link rel="mask-icon" href="../css/favicon/safari-pinned-tab.svg" color="#5bbad5">
  <meta name="msapplication-TileColor" content="#da532c">
  <meta name="theme-color" content="#ffffff">
    
  <style>
      body{
          margin: 0;
      }  
      #playBtn{
          position: absolute;
          width: 180px;
          height: 100px;
          font-family: 'RocknRoll One', sans-serif;
          font-size: 40px;
          bottom: 100px;
          border-radius: 20px;
          background-color: darkblue;
          color: white;
          left: 50%;
          transform: translateX(-50%);
      }
      #instructions{
          position:absolute;
          bottom: 250px;
          font-family: 'RocknRoll One', sans-serif;
          font-size: 30px;
          color: darkblue;
          width: 300px;
          left: 50%;
          transform: translateX(-50%);
          border-radius: 20px;
          padding: 30px;
          background-color: rgba(255, 255, 255, 0.5);
          text-align: center;
      }

      #gameover{
          display: none;
          position:absolute;
          bottom: 250px;
          font-family: 'RocknRoll One', sans-serif;
          font-size: 50px;
          color: darkblue;
          width: 300px;
          left: 50%;
          transform: translateX(-50%);
          border-radius: 20px;
          padding: 30px;
          background-color: rgba(255, 255, 255, 0.5);
          text-align: center;
      }
      #info{
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          font-family: 'RocknRoll One', sans-serif;
          font-size: 50px;
      }
      #info img{
          padding-top: 20px;
      }
      #life{
        position: absolute;
        left: 20px;
      }
      #score-panel{
        position: absolute;
        top: 0;
        right: 20px;
        float: right;
      }
      #lives{
          display: inline;
          position: relative;
          top: -15px;
      }
      #score{
          display: inline;
          position: relative;
          top: -15px;
      }
  </style>

  <title>5.1 Plane Game</title>
  <p id="instructions">按空格键, 单击 或者 轻触 控制飞机上升， esc 暂停/继续</p>
  <div id="info">
    <div id="life">
        <img src="../assets/plane/plane-icon.png" /><div id="lives">3</div>
    </div>
    <div id="score-panel">
        <div id="score">0</div><img src="../assets/plane/star-icon.png" />
    </div>
</div>
<p id="gameover">Game over</p>

  <button id="playBtn">开始</button>

</head>

<body>
    <script type="module">
        import { Game } from './Game.js';

        document.addEventListener("DOMContentLoaded", () => {
            const game = new Game();
            window.game = game;  
            ani()
        })
            function ani(t){ 
                    //  console.log(t);
                    game.render(t) ;
                    requestAnimationFrame(ani)
            }
    </script>
</body>

</html>
